<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>评价</title>
    <style>
        * { margin: 0;padding: 0;}
        #body {
            width: 60%;
            height: 1800px;
            background: #ccc;
            margin: 30px auto
        }
        #body #body_div {
            width: 90%;
            height: 230px;
            background: #0ff;
            border: 5px solid #0f0;
            padding: 15px;
            margin: 0 auto
        }
        #body #body_div p,span {
            font-size: 20px;
        }
        #body #body_div input {
            font-size: 30px;
            background-color: #eee;
        }
        #body #body_div textarea {
            width: 80%;
            height: 80px;
            font-size: 20px;
        }
        #body #body_div button {
            width: 80px;
            height: 40px;
            float: right;
            border: none;
            background: #bf0
        }
        ul {
            width: 90%;
            height: 1400px;
            background: #eee;
            margin: 0 auto;
            margin-top: 50px;
        }
        ul li {
            list-style: none;
        }
        ul li a {
            text-decoration: none;
            font-size: 20px;
            color: #777;
            float: right;
            border: 2px solid #0ff;
        }
        ul li #call{
            font-size: 20px;
            border: 2px solid #0ff;
            float: right;
            color: #777; 
            margin-right: 20px;
        }
    </style>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        function submit() {
            var name = document.querySelector("input")
            var textarea = document.querySelector("textarea")
            var ul = document.querySelector("ul")
            var newli = document.createElement("li")
            newli.innerHTML = "<p><span>" + "用户名：" + name.value + "</span><br></p><p><span>" + "用户评论：" + textarea.value + "</span><a href='#' id='del'>删除</a><button id='call'>点赞<tton></p>"
            if (ul.children) {
                ul.insertBefore(newli, ul.firstElementChild);
            }
            else {
                ul.appendChild(newli)
            }
            name.value = '';
            textarea.value = '';
            submit.onclick = null;
            // submit.style.backgroundColor = '#ccc';
            var del = ul.getElementsByTagName('a');
            var call = ul.querySelectorAll("#call")
            var lis = document.querySelectorAll('li')
            for (let i = 0; i < del.length; i++) {
                del[i].onclick = function () {
                       ul.removeChild(lis[i]);
                }
                call[i].onclick = function(){
                    call[i].style.color = "red"
                }
            }
        }
    </script>
</head>

<body>
    <div id="body">
        <div id="body_div">
            <p>用户名：</p><input type="text"><br>
            <p>评论区域：</p><textarea name="" id="" cols="30" rows="10"></textarea>
            <div>
                <span>最多输入80个字</span>
                <button onclick="submit()">提交</button>
            </div>
        </div>
        <ul id="myul"></ul>
    </div>
</body>
</html>